<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>富顺天牧</title>
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="../adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../adminlte/bower_components/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="../adminlte/bower_components/Ionicons/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../adminlte/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="../adminlte/dist/css/skins/_all-skins.min.css">


    <script type="text/javascript" src="../3thjs/axios.min.js"></script>
    <script type="text/javascript" src="../3thjs/vue.js"></script>

    <!-- jQuery 3 -->
    <script src="../adminlte/bower_components/jquery/dist/jquery.min.js"></script>

    <!-- Bootstrap 3.3.7 -->
    <script src="../adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <script src="../js/global.js"></script>
    <script src="../js/index.js"></script>

    <style type="text/css">

        .my-progress {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            display: flex;
        }

        .sk-circle {
            margin: auto auto auto 50vw;
            width: 50pt;
            height: 50pt;
        }

        .sk-circle .sk-child {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .sk-circle .sk-child:before {
            content: '';
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            background: #1989C0;
            border-radius: 100%;
            -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
            animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
        }

        .sk-circle .sk-circle2 {
            -webkit-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            transform: rotate(30deg);
        }

        .sk-circle .sk-circle3 {
            -webkit-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
            transform: rotate(60deg);
        }

        .sk-circle .sk-circle4 {
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        .sk-circle .sk-circle5 {
            -webkit-transform: rotate(120deg);
            -ms-transform: rotate(120deg);
            transform: rotate(120deg);
        }

        .sk-circle .sk-circle6 {
            -webkit-transform: rotate(150deg);
            -ms-transform: rotate(150deg);
            transform: rotate(150deg);
        }

        .sk-circle .sk-circle7 {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .sk-circle .sk-circle8 {
            -webkit-transform: rotate(210deg);
            -ms-transform: rotate(210deg);
            transform: rotate(210deg);
        }

        .sk-circle .sk-circle9 {
            -webkit-transform: rotate(240deg);
            -ms-transform: rotate(240deg);
            transform: rotate(240deg);
        }

        .sk-circle .sk-circle10 {
            -webkit-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
            transform: rotate(270deg);
        }

        .sk-circle .sk-circle11 {
            -webkit-transform: rotate(300deg);
            -ms-transform: rotate(300deg);
            transform: rotate(300deg);
        }

        .sk-circle .sk-circle12 {
            -webkit-transform: rotate(330deg);
            -ms-transform: rotate(330deg);
            transform: rotate(330deg);
        }

        .sk-circle .sk-circle2:before {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }

        .sk-circle .sk-circle3:before {
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }

        .sk-circle .sk-circle4:before {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        .sk-circle .sk-circle5:before {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        .sk-circle .sk-circle6:before {
            -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s;
        }

        .sk-circle .sk-circle7:before {
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }

        .sk-circle .sk-circle8:before {
            -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
        }

        .sk-circle .sk-circle9:before {
            -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
        }

        .sk-circle .sk-circle10:before {
            -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
        }

        .sk-circle .sk-circle11:before {
            -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
        }

        .sk-circle .sk-circle12:before {
            -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
        }

        @-webkit-keyframes sk-circleBounceDelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
            40% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes sk-circleBounceDelay {
            0%, 80%, 100% {
                -webkit-transform: scale(0);
                transform: scale(0);
            }
            40% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        ::-webkit-scrollbar {
            width: 0;
            height: 0;
        }


    </style>

</head>

<body class="hold-transition skin-red-light sidebar-mini"
      style="overflow-x: scroll;-webkit-overflow-scrolling: touch; min-width: 1280px;">
<div class="wrapper" style="background: white;">

    <header class="main-header" id="main-header">

        <!-- Logo -->
        <a class="logo" style="position: fixed;">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><img style="width: 27pt; height: 27pt;" src="../adminlte/dist/img/logo.png"></span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><img style="width: 27pt; height: 27pt;"
                                       src="../adminlte/dist/img/logo.png"> <b style="font-size: 14pt;">富顺天牧</b></span>
        </a>

        <div style="position: fixed; width: 100%;">


            <nav class="navbar navbar-static-top" style="position: relative;">
                <!-- Sidebar toggle button-->
                <a href="#" class="sidebar-toggle" style="height: 37pt;" @click="openMenu('index1.html')" role="button">
                </a>
                <div>
                    <ul class="nav navbar-nav">
                        <li class="dropdown messages-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-envelope-o"></i>
                                <span id="messageCount" style="visibility: hidden;" v-if="hasMessage"
                                      class="label label-danger">{{messageCount}}</span>
                            </a>
                            <ul class="dropdown-menu" style="width: 300pt; background-color: #dfe9fb">
                                <li class="header"
                                    style="font-weight: bold; color: #e92e0c; background-color: transparent;">
                                    以下消息必须处理!!!
                                </li>
                                <table class="table" style="color: #1a0c09; margin-bottom: 0;">
                                    <tr v-for="(m, i) in messages">
                                        <td>
                                            <div style="display: flex; flex-direction: column;">
                                                <label style="font-size: 10pt; color: #5e5e5e; font-weight: normal;">{{m.time}}</label>
                                                <label>{{m.content}}</label>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- Navbar Right Menu -->
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <li class="dropdown user user-menu">
                            <a>
                                <img src="../img/touxiang.png" class="user-image" alt="User Image">
                                <span class="hidden-xs">{{userName}}</span>
                                <span style="color: #FFF134; margin-left: 4pt;">{{role}}</span>
                            </a>
                        </li>
                        <li>
                            <a @click="logout()"><i class="fa fa-power-off"></i></a>
                        </li>
                    </ul>
                </div>
            </nav>

        </div>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar" id="menu" style="position: fixed; overflow: auto; height: 100%;">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu" style="visibility: hidden;" id="menus" data-widget="tree">
                <li class="header">MAIN NAVIGATION</li>

                <li class="treeview" v-for="m in menus" :id="'menu' + m.menu_id">
                    <a @click="clickMenu(m.menu_id)">
                        <i :class="m.icon"></i>
                        <span>{{m.menu}}</span>
                        <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>

                    <ul class="treeview-menu">
                        <li v-for="sm in m.sub_menu" :class="{active: menu(sm.menu)}"
                            @click="changeContent(m.menu, sm.menu, sm.url, m.menu_id)">
                            <a style="margin-left: 14pt;"><i :class="sm.icon"></i> {{sm.menu}}
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div id="leftContent" class="content-wrapper" style="min-height: 120pt;">

        <ol id="nav" class="breadcrumb"
            style="margin-bottom: 0; height: 67pt; padding-top: 45pt; display: flex; flex-direction: row;
                    float: bottom; border-radius: 0;">
            <li><a @click="close()"><i class="fa fa-folder-open"></i> {{title}}</a></li>
            <li class="active"><a @click="close()">{{subTitle}}</a></li>

            <button id="closeButton" v-if="showCloseButton" type="button" class="btn btn-danger btn-xs" @click="close()"
                    style="margin-left: auto; padding: 5pt 10pt; height: 22pt; margin-top: -4pt; visibility: hidden;"
                    onmouseover="showKey()" onmouseout="hideKey()">{{closeButton}}
            </button>
        </ol>


        <section style="padding: 0; background: white; display: flex;">
            <!-- Main row -->
            <iframe id="main-content" width="100%"
                    frameborder="0"
                    style="padding-left:0; margin-left: 0; margin-right: 0;border-style: none; background: transparent;"></iframe>

            <iframe id="main-content1" width="100%"
                    frameborder="0"
                    style="padding-left:0; margin-left: 0; margin-right: 0;border-style: none; background: transparent; display: none;"></iframe>

        </section>
    </div>
</div>
<!-- ./wrapper -->


<div id="alert-success" style="z-index:10000;visibility: hidden; position: fixed; bottom: 0; right: 0; width: 400pt;">
    <div class="alert alert-success">
        <h5><i class="icon fa fa-check"></i> 操作成功!</h5>
    </div>
</div>

<div id="alert-fail" style="z-index:10000;visibility: hidden; position: fixed; bottom: 0; right: 0; width: 400pt;">
    <div class="alert alert-danger">
        <h5><i class="icon fa fa-close"></i> 操作失败!</h5>
    </div>
</div>

<div id="alert-info-c">
    <div id="alert-info" style="z-index:10000;visibility: hidden; position: fixed; bottom: 0; right: 0; width: 400pt;">
        <div class="alert alert-warning">
            <h5><i class="icon fa fa-warning" style="line-height: 22pt;"></i> {{info}}</h5>
        </div>
    </div>
    <div id="alert-tip" style="z-index:10000;visibility: hidden; position: fixed; bottom: 0; right: 0; width: 400pt;">
        <div class="alert" style="background-color: #444; color: white; padding-top: 2pt; padding-bottom: 2pt;">
            <h5 style="line-height: 2;">{{info}}</h5>
        </div>
    </div>
</div>

<div class="modal fade" id="alert-confirm-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{{title}}</h4>
            </div>
            <div class="modal-body">
                <p>{{message}}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-warning" data-dismiss="modal" @click="confirmCancel()">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" @click="confirmButtonClick()">
                    {{buttonTitle}}
                </button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="alert-info-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{{title}}</h4>
            </div>
            <div class="modal-body">
                <p id="message">{{message}}</p>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>


<div releaseCount="0" class="sk-circle my-progress" id="my-progress" style="visibility: hidden;">
    <div class="sk-circle1 sk-child"></div>
    <div class="sk-circle2 sk-child"></div>
    <div class="sk-circle3 sk-child"></div>
    <div class="sk-circle4 sk-child"></div>
    <div class="sk-circle5 sk-child"></div>
    <div class="sk-circle6 sk-child"></div>
    <div class="sk-circle7 sk-child"></div>
    <div class="sk-circle8 sk-child"></div>
    <div class="sk-circle9 sk-child"></div>
    <div class="sk-circle10 sk-child"></div>
    <div class="sk-circle11 sk-child"></div>
    <div class="sk-circle12 sk-child"></div>
</div>

<div class="modal" id="image-modal">
    <img style="width: 100vw; height: 100vh; object-fit: contain;" :src="imgUrl" @click="closeImage()">
</div>

<div class="modal" id="video-modal">
    <div v-if="videoUrl !== '#'" style="display: flex; flex-direction: row; justify-content: center;">
        <video :src="videoUrl" style="width:auto; height: 100vh;" controls="controls" autoplay="autoplay" loop="loop"></video>
        <img src="../img/close.png" style="width: 30pt; height: 30pt; margin: 30pt 30pt 30pt -60pt; z-index: 10;" @click="closeVideo()">
    </div>
</div>


</body>
</html>
